<template>
  <div
    class="control-list"
    :class="'rank' + checkItem.riskRank"
    @click="eventClick"
  >
    <div class="list-item">
      <div class="item-title">
        <span class="title-text">
          {{ checkItem.name || "" }}
        </span>
      </div>
      <div class="item-body">管控部门：{{ checkItem.departments }}</div>
    </div>
    <div class="list-rigth">
      <img
        v-if="!checkItem.stateNum"
        src="../../../assets/icon/safety_controlled.svg"
        alt=""
        style="width:15px;height:16px"
      />
      <img v-else src="../../../assets/icon/safety_warning.svg" alt="" style="width:17px;height:15px" />
      <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      planTypeArr: ["日常", "专项", "综合", "现场", "资料"],
      show: false
    };
  },
  props: {
    checkItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showStandard: {
      type: Boolean,
      default: false
    },
    isStandard: {
      type: Boolean,
      default: false
    },
    itemChild: {
      type: Boolean,
      default: true
    },
    titleCheck: {
      type: Boolean,
      default: true
    },
    showDone: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    planDateil() {
      return this.$store.state.safetyCheck.details;
    },
    standardItem() {
      if (this.checkItem.content) {
        let item = JSON.parse(this.checkItem.content);
        return item;
      }
      return [];
    }
  },
  activated() {},
  methods: {
    eventDetail(tag) {
      this.$emit("eventDetail", this.checkItem, tag);
    },
    eventClick() {
      this.$emit("eventClick", this.checkItem);
    },
    eventClickStandardItem(item) {
      // console.log(item);
      this.$emit("eventStandardItem", this.checkItem, item);
    }
  }
};
</script>
<style lang="less" scoped>
.control-list {
  padding: 8px 0 8px 16px;
  margin-bottom: 12px;
  height: auto;
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #fff;
  background-color: #292a4d;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #76bed8;
  }
  &.rank1::before {
    background-color: #76bed8;
  }
  &.rank2::before {
    background-color: #e5cf65;
  }
  &.rank3::before {
    background-color: #e47546;
  }
  &.rank4::before {
    background-color: #e54c5e;
  }
  .ellipsis {
    display: inherit !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .list-item {
    width: 70%;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    .item-title {
      font-size: 17px;
      color: #fff;
      // overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      &.overdue {
        justify-content: flex-start;
      }
      .tag {
        color: #4266d6;
        float: right;
        font-size: 15px;

        &.yollow {
          color: #dd9710;
        }
        &.redy {
          color: #f56c6c;
        }
        &.green {
          color: #67c23a;
        }
      }
      .title-label {
        margin-left: -8px;
        border-radius: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        font-size: 14px;
        padding: 0 12px 1px 8px;
        background-color: #456de6;
        margin-right: 8px;
      }
      .title-text {
        margin-right: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .title-check {
        font-size: 14px;
      }
      .title-tip {
        width: 100%;
        font-size: 14px;
        padding: 1px 4px 2px;
        border-radius: 4px;
        margin-left: 4px;
        font-size: 13px;
        background-color: #456de6;
        &.status {
          color: #456de6;
        }
        &.status1,
        &.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
        // &.green {
        //   color: #67c23a;
        // }
        // &.gray {
        //   color: #999;
        // }
      }
    }
    .item-body {
      color: rgba(255, 255, 255, 0.6);
      font-size: 16px;
      padding: 4px 0;
      display: flex;
      justify-content: space-between;
    }
  }
  .list-rigth {
    width: 40px;
    height: 60px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .their {
    font-size: 14px;
    color: #fff;
  }
  .more  {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .time {
    font-size: 14px;
    color: rgba(69, 109, 230, 1);
  }
}
</style>
